

@font-face{
    font-family: 'Franklin Gothic Heavy';
    src: url('./fontface/FRAHV.TTF');     
}

@font-face{
    font-family: 'Visia Pro';
    src: url('./fontface/visiapro-bold.ttf') ;
}


@font-face{
    font-family: 'Franklin Gothic Demi';
    src: url('./fontface/FRADM.TTF') ;
}

@font-face{
    font-family: 'FZZhengHeiS-EB-GB';
    src: url('./fontface/FZZb.TTF') ;
}

@font-face{
    font-family: 'Aurora BdCn BT';
    src: url('./fontface/IMPACT.TTF') ;
}

@font-face{
    font-family: 'Baloo Bhaina';
    src: url('./fontface/BalooBhaina-Regular.ttf') ;
}

@font-face{
    font-family: 'SigmarOne-Regular';
    src: url('./fontface/SigmarOne-Regular.ttf') ;
}


@font-face{
    font-family: 'title-cn';
    src: url('./fontface/TITLE_CN.TTF') ;
}


@font-face{
    font-family: 'text-cn';
    src: url('./fontface/TEXT_CN.TTF') ;
}

// 800 标题 
@font-face{
    font-family: 'Source Han Sans CN';
    src: url('./fonttt/SourceHanSansCN-Bold.otf') ;
}

// 500 内容
@font-face{
    font-family: 'SourceHanSansCN';
    src: url('./fonttt/SourceHanSansCN-Medium.otf') ;
}

// 副标题
@font-face{
    font-family: 'FZZZHONGJW';
    src: url('./fonttt/FZZZHONGJW.ttf') ;
}
// 100 - Thin

// 200 - Extra Light (Ultra Light)

// 300 - Light

// 400 - Regular (Normal、Book、Roman)

// 500 - Medium

// 600 - Semi Bold (Demi Bold)

// 700 - Bold

// 800 - Extra Bold (Ultra Bold)

// 900 - Black (Heavy)

.title_cn{
    font-family: title-cn !important;
}
.text_cn{
    font-family: text-cn !important;
}

$base_color:#DF561C;
$base_bg:#F7F8FA;
$yh:FZZZHONGJW SourceHanSansCN Source Han Sans CN  Baloo Bhaina SigmarOne-Regular  Franklin Gothic Demi  Aurora BdCn BT FZZhengHeiS-EB-GB PingFang Visia Pro   Arial Black ;




@import "./css/style.css";
@import "./base.scss";
@import "./animate.css";
@import "./common.scss";
@import "./common-style.scss";

// @import "./mobile.scss";

.hidden2{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

.hidden3{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3; 
}
div{
    box-sizing: border-box;
}
html,body,.main-box{
    width:100%;
}

.main-box{
    position: relative;
    .smimg{
        width:32px;
        height:32px;
        position: fixed;
        z-index:3000;
        left:50%;
        
    }
    .smg {
        width:40px;
        height:40px;
        top:100px;
    }
    .smr{
        left:80%;
        width:36px;
        height:36px;
        top:200px;
    }
    .smy{
        left:20%;
        top:300px;
    }
}

.erroremail{
    position: absolute;
    left:25px;
    bottom:-22px;
    color:red;
}

.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    opacity: 1;
}

.rippleEffect {
    -webkit-animation: rippleDrop .4s linear;
    animation: rippleDrop .4s linear;
}

@-webkit-keyframes rippleDrop {
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes rippleDrop {
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

.loginbtn{
    width: 120px;height:50px;
    /* position: relative; */
    background: #1685D3;
    outline: line;
    /* overflow: hidden; */
}

// 动态切换   

@keyframes move-out{
    from{
        transform: translateY(0);
        opacity: 1;
    }
    to{
        transform: translateY(5%);
        opacity: 0;
    }
}

@keyframes move-in{
    from{
        transform: translateY(5%);
        opacity: 0;
    }
    to{
        transform: translateY(0%);
        opacity: 1;
    }
}

.slide-enter-active{
    animation: move-in .3s;
}
.slide-leave-active{
    animation: move-out .3s;
}

img{
    border:0px  !important;
}

.borderred{
    border-color:red !important;
}



.childbox{
    width:100%;
    height:100%;
    position: relative;
}

.slideInRight{
    animation: slideInRight 0.7s linear;
}

.slideInLeft{
    animation: slideInLeft 0.7s linear;
}
/* 侧边栏动画 */
.menumove-enter-active{
    animation: slideInRight 0.3s linear;
}
.menumove-leave-active{
    animation: slideOutRight 0.3s  linear;
}

.slidemv-enter-active{
    animation: slideInDown 0.35s linear;
}
.slidemv-leave-active{
    animation: slideOutUp 0.35s  linear;
}

.fadeInDown-enter-active{
    animation:fadeInDown .5s 0.3s both;
}

.fadeOutDown-leave-active{
    animation:fadeOutDown .5s  both;
}


.zoomInUp{
    animation:zoomInUp .5s  both;
}


.fadeInDown{
    animation:fadeInDown .5s 0.3s both;
}

.fadeOutDown{
    // animation:fadeOutDown .5s  both;
}

/*所有的动画*/

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all .3s;
    position: absolute;
    width: 100%;
    left: 0;
}

.slide-right-enter {
    transform: translateX(-100%);
}

.slide-right-leave-active {
    transform: translateX(100%);
}

.slide-left-enter {
    transform: translateX(100%);
}

.slide-left-leave-active {
    transform: translateX(-100%);
}





.form-enter-active {
    animation: zoomIn .6s;
}

.form-leave-active {
    animation: zoomOut .6s;
}

.bounceInDown {
    animation: bounceInDown 1s;
}

.fadeIn{
    animation: fadeIn 0.7s;
}

// 动画1 
@keyframes  turnon-enter{
    from{opacity: 0;transform: translateY(5%)}
    to{opacity: 1;transform: translateY(0%)}
}
@keyframes  turnon-leave{
    from{opacity: 1;transform: translateY(0%)}
    to{opacity: 0;transform: translateY(5%)}
}

@keyframes  turnoff-enter{
    from{opacity: 0;transform: translateY(5%)}
    to{opacity: 1;transform: translateY(0%)}
}
@keyframes  turnoff-leave{
    from{opacity: 1;transform: translateY(0%)}
    to{opacity: 0;transform: translateY(5%)}
}

.turn-on-enter-active{
  animation: turnon-enter .4s;
}
.turn-on-leave-active{
  animation: turnon-leave .4s;
}

.turn-off-enter-active{
  animation: turnoff-enter .4s;
}
.turn-off-leave-active{
  animation: turnoff-leave .4s;
}

.bounce{
    animation:bounce 1.4s 0s infinite both ;
}

.bounceonce{
    animation:bounce 1.4s 0s  both ;
}


.heartBeat{
    animation: heartBeat 2s   both ;
}


.rollIn{
    animation: rollIn 1s   both ;
}

.zoomIn{
    animation: zoomIn 1s   both ;
}

.zoomInDown{
    animation: zoomInDown 1s   both ;
}

.fadeInBottomRight{
    animation: fadeInBottomRight 1s   both ;
}
.tada{
    animation: tada 1.3s both infinite;
}
.heartBeat{
    animation: heartBeat 3s 0 ;
}

.bounce{
    animation: bounce 1.3s  both infinite;
}

.pulse{
    animation: pulse 1.3s  both infinite;
}

.bounce{
    animation: bounce 1s   both ;
}

.wobble{
    animation: wobble 1s   both ;
}
.flipInX{
    animation: flipInX 1s   both ;
}

.animate__lightSpeedInRight{
    animation: fadeInRight 1s   both ;
}

.lightSpeedInRight{
    animation: lightSpeedInRight 1s both;
}
.lightSpeedInLeft{
    animation: lightSpeedInLeft 1s   both ;
}

.lightSpeedInRightfast{
    animation: lightSpeedInRight 1s both;
}
.lightSpeedInLeftfast{
    animation: lightSpeedInLeft 1s   both ;
}


.zoomInDown{
    animation: zoomInDown 1s   both ;
}

.zoomInLeft{
    animation: zoomInLeft 1s   both ;
}

.zoomInRight{
    animation: zoomInRight 1s   both ;
}

.zoomInUp{
    animation: zoomInUp 1s   both ;
}

.fadeInUp{
    animation: fadeInUp 1s  both  ;
}

.fadeInDown{
    animation: fadeInDown 1s  both  ;
}

.jackInTheBox{
    animation: jackInTheBox 1.5s both    ;
}


@keyframes myfade {

    0%{
        height:0%;
        opacity: 0;
    }
  
    100% {
      height:100%;
      opacity: 1;
      
    }
}

.myfade{
    animation: myfade 1s  both  ;
}


@keyframes moveIn{
    from{
        transform: translateY(5%);
        opacity: 0;
    }
    to{
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes moveOut{
    0%{
        transform: translateY(0%);
        opacity: 1;
    }
    100%{
        transform: translateY(5%);
        opacity: 0;
    }
}
.move-enter-active{
    animation: moveIn 0.4s;
}

.move-leave-active{
    animation: moveOut 0.4s;

}